<template>
  <div class="page-info">
    <div class="search">
      <div class="search-box">
        <a-form :model="searchInfo" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-item :name="labelMap['categoryCode'].name" :label="labelMap['categoryCode'].label">
                <a-input style="width: 90%;margin-left: 8px;" v-model:value="searchInfo.categoryCode"
                  :placeholder="'请选择' + labelMap['categoryCode'].label" allow-clear />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item :name="labelMap['categoryName'].name" :label="labelMap['categoryName'].label">
                <a-input style="width: 90%;margin-left: 8px;" v-model:value="searchInfo.categoryName"
                  :placeholder="'请选择' + labelMap['categoryName'].label" allow-clear />
              </a-form-item>
            </a-col>
            <a-col style="text-align: right; margin-bottom: 20px;">
              <a-space>
                <a-button type="primary" @click="query"> 查找</a-button>
                <a-button type="primary" @click="cancelQuery">清空</a-button>
              </a-space>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </div>
    <div class="button" style="margin: 10px;">
      <a-space>
        <a-button type="primary" @click="editPartnerCategoryConfig('add')">新增</a-button>
        <a-button type="primary" danger @click="batchDelPartnerCategoryConfig">删除</a-button>
      </a-space>
    </div>
    <div class="content">
      <a-table :dataSource="dataSource" :columns="columns" :loading="loading" :row-key="(record) => record.id"
        :pagination="pagination" @change="handleTableChange" :scroll="{ y: 470 }" :row-selection="rowSelection">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'operation'">
            <a-space>
              <a-button type="primary" size="small"
                @click="editPartnerCategoryConfig('update', record.id)">编辑</a-button>
              <a-popconfirm title="确认删除?" ok-text="确认" cancel-text="取消" @confirm="delPartnerCategoryConfig(record.id)"
                @cancel="cancel">
                <a-button type="primary" size="small" danger>删除</a-button>
              </a-popconfirm>
            </a-space>
            <span></span>
          </template>
        </template>
      </a-table>
      <PartnerCategoryConfigDetail ref="editInfo" :open="visible" :modelInfo="modelInfo" @handleOk="handleOk"
        @handleCancel="handleCancel"></PartnerCategoryConfigDetail>
    </div>
  </div>
</template>
<script setup lang="ts">
  import {
    SearchInfo,
    pagination,
    columns,
    DataItem,
    ModelInfo,
    pageInfo,
  } from "./partnerCategoryConfigListTs";
  import { getPartnerCategoryConfigPage, deletePartnerCategoryConfig } from "@/api/userInfo/partnerCategoryConfig/partnerCategoryConfigTs";
  import { message } from "ant-design-vue";

  const labelCol = ref({ span: 5 });
  const wrapperCol = ref({ span: 19 });

  let rowIds = [] as any;

  const rowSelection = ref({
    checkStrictly: false,
    onChange: (selectedRowKeys: (string | number)[], selectedRows: DataItem[]) => {
      rowIds = selectedRowKeys;
    },
    onSelect: (record: DataItem, selected: boolean, selectedRows: DataItem[]) => {
      console.log(record, selected, selectedRows);
    },
    onSelectAll: (selected: boolean, selectedRows: DataItem[], changeRows: DataItem[]) => {
      console.log(selected, selectedRows, changeRows);
    },
  });

  const labelMap = ref<any>(
    {
      categoryCode: { name: 'categoryCode', label: '类别编码' },
      categoryName: { name: 'categoryName', label: '类别名称' },
      price: { name: 'price', label: '实际价格（元）' },
      originalPrice: { name: 'originalPrice', label: '原价（元）' },
      duration: { name: 'duration', label: '购买时长（单位：数值）' },
      durationType: { name: 'durationType', label: '时长类型：DAYS=天，MONTHS=月，YEARS=年' },
    });

  let searchInfo = ref<SearchInfo>({});


  const cancelQuery = (): void => {
    searchInfo.value = {};
  }

  const query = (): void => {
    getPartnerCategoryConfigListPage(searchInfo.value, pagination.value);
  }

  const handleTableChange = (pagination): void => {
    getPartnerCategoryConfigListPage(searchInfo.value, pagination);
  }

  const delPartnerCategoryConfig = (ids: string): void => {
    deletePartnerCategoryConfig(ids).then((res) => {
      if (res.code == "200") {
        message.success((res && "删除" + res.message) || "删除成功！", 3);
        getPartnerCategoryConfigListPage(searchInfo.value, pagination.value);
      } else {
        message.error((res && res.message) || "删除失败！", 3);
      }
    });
  }

  const batchDelPartnerCategoryConfig = (): void => {
    let ids = "";
    if (rowIds && rowIds.length > 0) {
      rowIds.forEach((item: string) => {
        ids += item + ",";
      });
      ids = ids.substring(0, ids.length - 1);
    } else {
      message.warning("请先选择数据！", 3);
      return;
    }
    delPartnerCategoryConfig(ids);
  }

  let loading = ref<boolean>(false);

  let dataSource = ref();

  const cancel = (e: MouseEvent): void => {
    console.log(e);
  }

  const getPartnerCategoryConfigListPage = (param: SearchInfo, cur: pageInfo): void => {
    loading.value = true;
    getPartnerCategoryConfigPage(param, cur.current, cur.pageSize)
      .then((res) => {
        if (res.code == "200") {
          dataSource.value = res.data.records;
          pagination.value.current = res.data.current;
          pagination.value.pageSize = res.data.size;
          pagination.value.total = res.data.total;
        } else {
          message.error((res && res.message) || "查询列表失败！");
        }
      })
      .finally(() => {
        loading.value = false;
      });
  }

  const init = (): void => {
    //获取合伙人类别配置表页面数据
    getPartnerCategoryConfigListPage(searchInfo.value, pagination.value);
  }

  init();

  let visible = ref<boolean>(false);

  let modelInfo = ref<ModelInfo>({});

  //新增和修改弹窗
  const editPartnerCategoryConfig = (type: string, id?: number): void => {
    if (type == "add") {
      modelInfo.value.title = "新增明细";
      modelInfo.value.id = undefined;
    } else if (type == "update") {
      modelInfo.value.title = "修改明细";
      modelInfo.value.id = id;
    }
    modelInfo.value.confirmLoading = true;
    visible.value = true;
  }

  const handleOk = (v: boolean): void => {
    visible.value = v;
    getPartnerCategoryConfigListPage(searchInfo.value, pagination.value);
  };

  const handleCancel = (v: boolean): void => {
    visible.value = v;
  };
</script>
<style lang="scss" scoped></style>
